<!-- 昵称 -->
<template>
	<view class="index pd-lr36">
		<view class="mt10">
			<text class="title">个人简介</text>
		</view>
		<view class="inputs">
		
				<textarea  
				class="input-text" type="text" 
				v-model="values" 
				placeholder-class='placeholder-class' 
				:placeholder='placeholder' 
				maxlength='200' 
				:adjust-position='false'
				@focus="placeholder = ''"
				@blur="placeholder = '来简单的介绍一下你自己吧~'"
				 />
		
		</view>
		<view class="mt10">
			<text>{{values.length}}/200</text>
		</view>
	</view>
</template>

<script>
	import { apiPostInfoUpdate } from '@/api/me.js';
	import {newData}from "@/utils/common.js"
	export default {
		components: {},
		data() {
			return {
				values:'',
				placeholder: '来简单的介绍一下你自己吧~'
			}
		},
		onLoad(data) {
			this.values = data.intro;
		},
		onNavigationBarButtonTap() {
		       apiPostInfoUpdate({intro:this.values}).then(res=>{
		       	newData()
		       })
		},
		watch:{
			values(val){
				// #ifdef APP-PLUS
				// 
				if(val){
				var webView = this.$mp.page.$getAppWebview();
				webView.setTitleNViewButtonStyle(0, {  
					color: '#FC315A',  
				}); 
				}else{
					var webView = this.$mp.page.$getAppWebview();
					webView.setTitleNViewButtonStyle(0, {  
						color: '#747384',  
					});
				}
				// #endif
				
			}
		},
	}
</script>

<style scoped lang="scss">
.index{
	font-size: 24upx;
	height: 100%;
	color:#747384
}
.placeholder-class{
	font-size: 28upx;
}
.inputs{
	margin-top: 40upx;
	padding: 26upx;
	min-height: 340upx;
	background-color: #1D1A2B;
	box-sizing: border-box;
	position: relative;
	border-radius: 8upx;
}
.input-text{
	width: 100%;
	color: #fff;
}
.close{
	position: absolute;
	right: 0;
	font-size: 34upx;
	top: 26upx;
	color: #D6D4E2;
	text-align: center;
	line-height: 28upx;
	width: 28upx;
	height: 28upx;
}
.mt10{
	margin-top: 20upx;
}
</style>
